<template>
    <div>
        <Table :columns="recordingColumns" :data="recordingList"></Table>
        <div v-if="recordingITotal>0" style="margin-top:20px;text-align: center">
            <Page :total=recordingITotal :page-size="recordingISize" :current="recordingIndex" show-total show-elevator @on-change="sizeChange" />
        </div>
        <Modal v-model="videoModal" :title="videoName" :footer-hide="true" width="800" :mask-closable="false" @on-visible-change="modalChange">
			<!--disablePictureInPicture="true"-->
			<div v-if="isFlv" class="video" style="width:100%;margin-top:10px;height: 440px;"></div>
			<video v-if="videoModal && !isFlv" :src="curVideoPath" controls="controls" controlsList='nodownload noremote footbar' style="width:100%;" autoplay id="learnVideo">
				您的浏览器不支持 video 标签。
			</video>
		</Modal>
    </div>
</template>

<script>
	import {quertRecordList,deleteRecord,addRecord} from '@/api/selfStudy/record.js'
export default {
    props:{
        classNumberInfo:{
            type: Object,
            default: () => {}
            // required:true,
            // validator(value) {
            //     return value.classNumberId && value.expList
            // }
        },
    },
    data(){
        return{
            videoName:'',
            videoModal:false,
            isFlv:false,
            recordingList:[],
            recordingIndex:1,
            recordingISize:10,
            recordingITotal:0,
            recordingColumns:[
                {
                    title: '录屏文件名',
                    key: 'fileName',
                    width:600,
                    align:'center'
                },
                {
                    title: '创建者',
                    key: 'creatorName',
                    align:'center'
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    align:'center'
                },
                {
                    title: '文件大小',
                    key: 'fileSize',
                    align:'center',
                    render: (h, params) => {
						return h('span', this.handlefileSize(params.row.fileSize))
					}
                },
                {
					title: '操作',
					width: 270,
                     align:'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
									// disabled: this.disDeploy(params.row) || this.step != 0
								},
								style: {
									marginRight: '6px'
								},
								on: {
									click: () => {
										this.playVideo(params.row);
									}
								}
							}, '查看'),
							h('Poptip', {
								props: {
									confirm: true,
									'ok-text': "确定",
									'cancel-text': "取消",
									type: 'error',
									size: 'large',
									title: '你确定要删除吗?',
									transfer:true
								},
								on: {
									'on-ok': () => {
										this.deleteRecord(params.row.id);
									}
								}
							}, [
								h('Button', {
									props: {
										type: 'error',
										size: 'small',
										// disabled: (!this.disbledAllBtn && (params.row.deployStatus == 3 && !params.row.disDestory)) && this.step != 0 ? false : true
									},
									style: {
										marginRight: '6px',
									},
									on: {
										click: () => {
										}
									}
                                    }, '删除')
							]),
                             h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small',
                                        // disabled: this.disDeploy(params.row) || this.step != 0
                                    },
                                    style: {
                                        marginRight: '6px',
                                        width:'60px'
                                    },
                                    on: {
                                        click: () => {
                                            this.sign(params.row);
                                        }
                                    }
                                }, params.row.teachFlag==0?'标记':"取消标记")
						])
					}
				}
            ],
        }
    },
    created(){
        this.quertRecordList()
    },
    methods:{
        sign(row){
            let paramas={
                id:row.id
            }
            if(row.teachFlag==0){
                paramas.teachFlag=1
            } else{
                paramas.teachFlag=0
            }
            addRecord(paramas).then(res=>{
                if(res.code==0){
                    this.$Message.success(res.message)
                    this.quertRecordList()
                } else{
                    this.$Message.warning(res.message)
                }
            })
        },
        quertRecordList(){
            let paramas={
                pageIndex:this.recordingIndex,
                pageSize:this.recordingISize,
                classNumberId:this.classNumberInfo.classNumberId
            }
            quertRecordList(paramas).then(res=>{
                if(res.code==1){
                    this.recordingList=res.data.items
                    this.recordingITotal=res.data.total
                } else{
                    this.$Message.warning(res.message)
                }
            })
        },
        sizeChange(val){
            this.recordingIndex=val
            this.quertRecordList()
        },
        deleteRecord(id){
            deleteRecord(id).then(res=>{
                if(res.code==1){
                    this.$Message.success('删除成功')
                    this.quertRecordList()
                } else{
                    this.$Message.warning(res.message)
                }
            })
        },
        playVideo(item) {
            console.log(item)
            this.videoModal = true;
            if(item.filePath.split('.').pop() == 'flv'){ //flv视频使用插件播放
                this.isFlv = true;
                setTimeout(() => {
                    var videoObject = {
                        container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
                        plug:'flv.js',//设置使用flv插件
                        video: '/Learn/' + item.filePath//视频地址
                    };
                    new ckplayer(videoObject);//初始化播放器
                })
            }else{
                this.isFlv = false;
                this.videoName = item.fileName
                this.curVideoPath = '/Learn/' + item.filePath;
            }
        },
        modalChange(status) {
            if(!status) {
                document.getElementById("learnVideo").pause();
                if(document.pictureInPictureElement) {
                    document.exitPictureInPicture();
                }
            } else {
                //          		document.getElementById("learnVideo").play();
            }
        },
        handlefileSize(fileSize){
            return  (fileSize/1024/1024).toFixed(2)+'MB'
        }
    }
}
</script>

<style>

</style>